<template>
	<view class="home-main">
		<view class="top">
			<view class="icon-flex">
				<image class="person-icon" src="../../static/logo.png"></image>
			</view>
			<view class="button">
				<image :src="icons.dayReport"></image>
				<image :src="icons.weekReport"></image>
			</view>

		</view>

		<view class="search">
			<view class="title">搜索我的日记</view>
			<image :src="icons.search"></image>
		</view>

		<view class="date">
			<view class="date-top">
				<view class="title">{{dateStr}}</view>
				<picker mode="date" data-value="date" start="1970-01-01" end="2030-01-01"
					@change="DateChange">
					<image :src="icons.date"></image>
				</picker>
			</view>
			<view class="date-day">
				<view class="item" v-for="(day,index) in days" :key='index'>
					<view class="title">{{day.title}}</view>
					<view class="date" :class="{'actived':dateIndex == index}" @click="dateIndex = index">{{day.date}}
					</view>
					<view class="tag">
						<view class="red tag-item"></view>
						<view class="yellow tag-item"></view>
					</view>
				</view>
			</view>
			<view class="plan-list">
				<view v-for="(plane,i) in planes" :key='i'>
					<view class="type">{{plane.type}}</view>
					<view class="item" v-for="(item,index) in plane.planes" :key='index'>
						<view class="top">
							<view class="status">
								<view class="tag"></view>
								<view class="txt blue">{{item.status}}</view>
							</view>
							<view class="title">{{item.title}}</view>
							<view class="operation">
								<image src="../../static/img/operation.png"></image>
							</view>
						</view>
						<view class="content">
							<view class="detail">{{item.detail}}</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import icons from '../../js/common/svgs.js'
	export default {
		name: 'Home',
		data() {
			return {
				icons:icons,
				headerBarHeight: 0,
				date: '',
				dateStr: '',
				dateIndex: -1, //当前选中日期
				planes: [{
					type: '分类',
					planes: [{
							title: '标题',
							detail: '详细',
							status: '进行中'
						},
						{
							title: '标题',
							detail: '详细',
							status: '进行中'
						},
						{
							title: '标题',
							detail: '详细',
							status: '进行中'
						},
						{
							title: '标题',
							detail: '详细',
							status: '进行中'
						}
					]
				}, {
					type: '分类',
					planes: [{
							title: '标题',
							detail: '详细',
							status: '进行中'
						},
						{
							title: '标题',
							detail: '详细',
							status: '进行中'
						},
						{
							title: '标题',
							detail: '详细',
							status: '进行中'
						},
						{
							title: '标题',
							detail: '详细',
							status: '进行中'
						}
					]
				}],
				days: [{
					title: '日',
					date: '1',
					hasPlan: true,
				}, {
					title: '一',
					date: '1',
					hasPlan: true
				}, {
					title: '二',
					date: '1',
					hasPlan: true,
				}, {
					title: '三',
					date: '1',
					hasPlan: true,
				}, {
					title: '四',
					date: '1',
					hasPlan: true,
				}, {
					title: '五',
					date: '1',
					hasPlan: true,
				}, {
					title: '六',
					date: '1',
					hasPlan: true,
				}]
			}
		},
		methods: {
			DateChange(e) {
				var _time = new Date(e.detail.value);
				this.initWeekInfo(_time)
			},
			//设置选中周信息
			initWeekInfo(d){
				this.date=d.getTime()
				this.dateStr = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日'
				let day = d.getDay()
				this.dateIndex = day
				this.days[day].date = d.getDate();
				let beforeDate = d.getDate()
				let afterDate = d.getDate()
				for (let i = 1; i <= day; i++) {
					if (beforeDate - 1 <= 0) {
						let newDate = new Date(d.getFullYear(), d.getMonth(), 0)
						beforeDate = newDate.getDate()
					} else {
						beforeDate = beforeDate - 1;
					}
					this.days[day - i].date = beforeDate;
				}
				
				let newDate = new Date(d.getFullYear(), d.getMonth(), 1)
				newDate.setMonth(newDate.getMonth() + 1)
				newDate.setDate(0)
				let lastDate = newDate.getDate()
				for (let i = day + 1; i < 7; i++) {
					if (afterDate >= lastDate) {
						afterDate = 1
					} else {
						afterDate = afterDate + 1;
					}
					this.days[i].date = afterDate;
				}
			}
		},
		mounted() {
			let d = new Date();
			this.initWeekInfo(d)
			this.headerBarHeight = this.$store.state.headerBarHeight
			if (this.headerBarHeight > 32) {
				this.headerBarHeight = this.headerBarHeight - 32
			}
		}
	}
</script>

<style lang="scss">
	.home-main {

		padding: 20px;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding-top: 4px;

		* {
			color: #7f8c8d;
		}

		.top {
			display: flex;

			.icon-flex {
				flex: 1;

				.person-icon {
					width: 30px;
					height: 30px;
					border-radius: 1rem;
					background: #ecf0f1;
					padding: 1px;
				}
			}

			.button {
				margin-left: 2rem;
				margin-top: 6px;

				image {
					display: inline-block;
					width: 1.4rem;
					height: 1.4rem;
					margin: 0 6px;
				}
			}

		}

		.search {
			background: #ecf0f1;
			padding: 2px 14px;
			border-radius: 2rem;
			line-height: 2rem;
			display: flex;
			font-size: 1rem;
			font-weight: bold;
			margin: 6px 0;

			.title {
				color: #b5bbbe;
				flex: 1;
			}

			image {
				margin-top: 0.5rem;
				height: 1rem;
				width: 1rem;
			}
		}


		.date::-webkit-scrollbar {
			display: none
		}

		.date {
			height: 10px;
			flex: 1;
			overflow: auto;

			.date-top {
				display: flex;
				border-bottom: 1px #eee solid;
				padding: 10px 0;

				.title {
					flex: 1;
				}

				image {
					height: 1rem;
					width: 1rem;
					margin-top: 0.2rem;
				}
			}

			.date-day {
				display: flex;
				margin-top: 10px;

				.item {
					text-align: center;
					flex: 1;
					display: flex;
					flex-direction: column;

					.title {
						font-size: 0.8rem;
						color: #bdc3c7;
					}

					.date {
						margin: 4px auto;
						padding: 4px;
						width: 1.4rem;
						height: 1.4rem;
						color: #95a5a6;
						font-weight: bold;
						transition: all 0.2s linear;
					}

					.date.actived {
						background: #95a5a6;
						color: #FFFFFF;
						border-radius: 0.8rem;
					}
				}


				.tag {
					margin: 0 auto;
					display: inline-flex;

					.tag-item {
						margin: 1px;
						width: 4px;
						height: 4px;
						border-radius: 4px;
					}

					.red {
						background: #e74c3c;
					}

					.yellow {
						background: #f39c12;
					}
				}
			}
		}

		.plan-list {
			margin: 10px 0;

			.type {
				width: 100%;
				font-weight: bold;
				margin-top: 20px;
			}

			.item {
				margin: 10px 0;
				border-radius: 10px;
				padding: 16px;
				background: #ecf0f1;

				.top {
					display: flex;
					line-height: 1.4rem;

					.title {
						flex: 1;
						font-weight: bold;
						margin: 0 10px;
					}

					.status {

						display: flex;

						.tag {
							margin-right: 4px;
							margin-top: 0.6rem;
							width: 4px;
							height: 4px;
							background: #3498db;
							border-radius: 4px;
						}

						.txt {
							display: inline-block;
							font-size: 0.8rem;
							color: #3498db;
							border-radius: 10px;
						}
					}


					.operation {
						float: right;
						margin-top: -6px;

						image {
							width: 1rem;
							height: 0.23rem;
						}
					}

				}

				.content {
					margin: 10px 0;
					text-align: left;
					width: 100%;

					.title {
						font-weight: bold;
					}
				}
			}
		}
	}
</style>
